<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝换一换</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <div class="warp">
        <div class="zuo">
            <img src="img/1.png" alt="">
            <span>距离结束还有00:50:59</span>
        </div>
        <div class="you">
            <p class="huan" id="btn">换一换</p>
            <p>更多》</p>
        </div>
    </div>
  <div class="text">
    <div class="row"  id="one">

    </div>
      </div>

      </div>


<script>
    var page = 1;
function ccc(){

    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            var json=JSON.parse(xmlhttp.responseText)
        for (let i=0;i<json.shop.length;i++){
            console.log(json.shop[i])
            let n=document.createElement('div')
            n.className='col-md-4';
            document.querySelector('#one').appendChild(n)

            let c=document.createElement('div')
            c.className='row'
            n.appendChild(c)
            let d=document.createElement('div')
            d.className='col-md-6'
            c.appendChild(d)
            let e=document.createElement('div')
            e.className='col-md-6'
            c.appendChild(e)

            var img=document.createElement('img')
            img.src=json.shop[i].name;
            d.appendChild(img)

            var p=document.createElement('p')
            p.innerHTML=json.shop[i].age
            e.appendChild(p)
            var m=document.createElement('span')
            m.className='kl'
            m.innerHTML=json.shop[i].abc
            e.appendChild(m)

            var o=document.createElement('div')
            o.className='sun'
            e.appendChild(o)

            var t=document.createElement('P')
            t.className='io'
            o.appendChild(t)
            t.innerHTML=json.shop[i].acc
            var g=document.createElement('P')
            g.className='ii'
            o.appendChild(g)
            g.innerHTML=json.shop[i].acd

            var y=document.createElement('div')
            y.className='qian'
            e.appendChild(y)
            var k=document.createElement('P')
            k.className='e'
            y.appendChild(k)
            k.innerHTML=json.shop[i].acf
            var h=document.createElement('P')
            h.className='f1'
            y.appendChild(h)
            h.innerHTML=json.shop[i].acg









        }

        }
    }
    xmlhttp.open("GET",page+".json",true);
    xmlhttp.send();
}

ccc()
    document.querySelector('#btn').addEventListener('click',function(){
        if (page>=4){
            page=1
        }else {
            page++;
        }
        document.querySelector('#one').innerHTML=""
        ccc()
    })
</script>
</body>
</html>
